<template>
  <Layout :name="'今日雨量'">
    <div id="todayRain"></div>
  </Layout>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from "vue";
  import Layout from '../layout.vue';
  import { dayjs } from 'element-plus';
  import * as echarts from 'echarts';
  import { getRainData } from '@/api/pageApi';

  // 图表配置
  let lineDom: HTMLElement | null = null;
  let charts: any = null;
  const rainXAxisData = ref<string[]>([]);
  const rainData = ref<number[]>([]);
  const renderChart = () => {
    if(charts != null && charts != undefined) {
      charts.dispose();
    }
    lineDom = document.getElementById("todayRain");
    charts = echarts.init(lineDom);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        top: '16%',
        left: '3%',
        right: '4%',
        bottom: '0%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          data: rainXAxisData.value,
          axisTick: {
            alignWithLabel: true
          },
          axisLabel: {
            color: '#fff'
          }
        }
      ],
      yAxis: [
        {
          name: '雨量(mm)',
          nameTextStyle: {
            color: '#fff'
          },
          type: 'value',
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              type: 'dashed'
            }
          }
        }
      ],
      series: [
        {
          type: 'bar',
          barWidth: '60%',
          data: rainData.value
        }
      ]
    };
    option && charts.setOption(option);
  }

  onMounted(() => {
    getRainData().then((res: any) => {
      console.log('查看雨量数据');
      console.log(res); // res.data
      res.data.map((item:any)=> {
        rainXAxisData.value.push(item.name);
        rainData.value.push(parseFloat(item.jy));
      });
      renderChart();
    })
  })
</script>

<style lang="less" scoped>
  #todayRain {
    width: 92%;
    height: 227px;
    margin: 30px auto 0 auto;
  }
</style>